<template>
  <div class="sign-info flex-h left right">
    <div class="option-item flex-v">
      <van-icon
        name="delete-o"
        class="delete-icon"
        size="25px"
        @click="clearSign"
      />
      <div
        class="line-btn flex-v center"
        @click="changeLine(5)"
      >
        <div
          class="mini-line"
          :class="{'fill-btn':baseLineWidth === 5}"
        />
      </div>
      <div
        class="line-btn flex-v center"
        @click="changeLine(12)"
      >
        <div
          class="middle-line"
          :class="{'fill-btn':baseLineWidth === 12}"
        />
      </div>
      <div
        class="line-btn flex-v center"
        @click="changeLine(18)"
      >
        <div
          class="large-line"
          :class="{'fill-btn':baseLineWidth === 18}"
        />
      </div>
      <div
        class="color-item"
        :class="{'select-color':signColor === '#FF0000'}"
      >
        <div
          class="red-btn"
          @click="changeColor('#FF0000')"
        />
      </div>
      <div
        class="color-item"
        :class="{'select-color':signColor === '#0000FF'}"
      >
        <div
          class="blue-btn"
          @click="changeColor('#0000FF')"
        />
      </div>
      <div
        class="color-item"
        :class="{'select-color':signColor === '#333333'}"
      >
        <div
          class="black-btn"
          @click="changeColor('#333333')"
        />
      </div>
    </div>
    <sign
      ref="sign"
      :base-line-width="baseLineWidth"
      :color="signColor"
      @createSign="createSign"
    />
    <div class="title-info flex-v center">
      <div class="title">
        手写签名
      </div>
      <div
        class="success-bth"
        @click="finishSign"
      >
        <van-icon
          name="success"
          size="40px"
          color="#ffffff"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Sign from '@/components/base/Sign'
import fileApi from '@/api/server/file'
import appApi from '@/api/server/app'
import { base64 } from '@/utils/encryption'

export default {
  name: 'HandwrittenSign',
  components: {
    Sign
  },
  data() {
    return {
      userInfo: {},
      baseLineWidth: 5,
      signColor: '#333333',
      signImg: {}
    }
  },
  computed: {
    ...mapState('account', [
      'token'
    ])
  },
  mounted() {
    // if (this.$route.query.p) {
    //   this.userInfo = JSON.parse(base64.decrypt(this.$route.query.p))
    //   const now = Date.now()
    //   if (this.userInfo.timeStamp < (now - 300000)) {
    //     this.$router.replace({
    //       name: 'operationResult',
    //       query: {
    //         msg: '二维码已过期',
    //         code: 1
    //       }
    //     })
    //   } else if (!this.token) {
    //     this.setToken(this.userInfo.token)
    //     this.getUserInfo()
    //   }
    // } else {
    //   this.$router.replace({
    //     name: 'operationResult',
    //     query: {
    //       msg: '页面参数错误',
    //       code: 1
    //     }
    //   })
    // }
  },
  methods: {
    ...mapMutations('account', ['setToken']),
    ...mapActions('account', ['getUserInfo']),
    clearSign() {
      this.$refs.sign.clear()
    },
    changeLine(baseLineWidth) {
      this.baseLineWidth = baseLineWidth
    },
    changeColor(signColor) {
      this.signColor = signColor
    },
    finishSign() {
      this.$refs.sign.finish()
    },
    async createSign(blobObj) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        await this.uploadBlob(blobObj)
        await this.signatureCreate()
      } catch (e) {
        console.log(e)
        this.$toast.clear()
      }
    },
    async uploadBlob(blobObj) {
      const formData = new FormData()
      formData.append('file', blobObj)
      return fileApi.fileUpload(formData)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.signImg = res.data
          }
        }).catch(e => {
          console.log(e)
        })
    },
    signatureCreate() {
      return appApi.signatureCreate({
        imageId: this.signImg.id,
        signatureName: '',
        signatureType: 1,
        uid: this.userInfo.uid,
        valid: !!this.userInfo.uid
      }).then(({ data: res }) => {
        if (res.code === 0) {
          if (this.$route.query.from && res.data.status) {
            this.$toast.success({
              message: '创建签名成功',
              forbidClick: true
            })
            setTimeout(() => this.$router.go(-1), 1357)
          } else {
            this.$router.replace({
              name: 'operationResult',
              query: {
                msg: res.msg,
                code: res.code,
                status: res.data.status,
                from: this.$route.query.from
              }
            })
          }
        }
      }).catch(e => {
        console.log(e)
      }).finally(
        this.$toast.clear()
      )
    }
  }
}
</script>

<style scoped lang="scss">
.sign-info{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.option-item{
  box-sizing: border-box;
  padding: 60px 5px;
  width: 40px;
  height: 100vh;
  background-color: #f7f7f7;
}
.delete-icon{
  transform: rotate(90deg);
  margin-bottom: auto;
}
.line-btn{
  width: 25px;
  height: 25px;
  margin: 5px 0;
}
.mini-line{
  width: 6px;
  height: 6px;
  border: 1px solid #333333;
  border-radius: 50%;
}
.middle-line{
  width: 10px;
  height: 10px;
  border: 1px solid #333333;
  border-radius: 50%;
}
.large-line{
  width: 15px;
  height: 15px;
  border: 1px solid #333333;
  border-radius: 50%;
}
.red-btn{
  width: 20px;
  height: 20px;
  border-radius: 15%;
  background-color: red;
}
.blue-btn{
  width: 20px;
  height: 20px;
  border-radius: 15%;
  background-color: blue;
}
.black-btn{
  width: 20px;
  height: 20px;
  border-radius: 15%;
  background-color: black;
}
.title-info{
  position: relative;
  width: 40px;
  height: 100vh;
  background-color: #1989fa;
}
.title{
  width: 200px;
  color: #ffffff;
  font-size: 20px;
  white-space: nowrap;
  transform: rotate(90deg);
  text-indent: 5px;
}
.success-bth{
  position: fixed;
  right: 0;
  bottom: 60px;
  transform: rotate(90deg);
}
.fill-btn{
  background-color: black;
}
.color-item{
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0);
}
.color-item{
  margin-top: 15px;
}
.select-color{
  box-sizing: border-box;
  border: 1px solid #FF8C00;
  border-radius: 15%;
}
</style>
